<script setup>
import { onMounted, reactive } from "vue";
import axios from "axios";
let TaskData = reactive({
    all_count: 0,
    completed_count: 0,
    not_finished_count: 0,
    pending_sales_count: 0,
});
onMounted(() => {
    getData();
    setInterval(() => {
        getData();
    }, 1000 * 60 * 2);
});
const getData = function () {
    axios
        .post(
            "http://10.78.164.124:8002/api/Constructor/hse_homepageapi/queryyltrqclcxjtasktoday"
        )
        .then((response) => {
            if (response.data.data) {
                let {
                    all_count,
                    completed_count,
                    not_finished_count,
                    pending_sales_count,
                } = response.data.data;
                TaskData.all_count = all_count;
                TaskData.completed_count = completed_count;
                TaskData.not_finished_count = not_finished_count;
                TaskData.pending_sales_count = pending_sales_count;
            }
        });
};
const link = async function () {
  const UserInfo = JSON.parse(sessionStorage.getItem("UserInfo")).AccessToken;
  const user = JSON.parse(UserInfo)
  console.log(user)
  window.open(
      `http://hse.yunuat.cqyt.petrochina/#/login?jwt=yltrqclc_${user.Account}_${user.AccessToken}`
  );
};
function getToken() {
    return new Promise((resolve, reject) => {
        axios({
            url: "http://10.78.1.12:10008/api/constructor/authcenter-api/jwt-token",
            method: "post",
            data: {
                userName: "ba62a4b730f65Anff4kfn2pfad14d462",
                passWord: "68a39b4790503ef481d8e0a66e065fc3",
            },
        }).then((res) => {
            resolve(res.data.data.objData.accessToken);
        });
    });
}
</script>
<template>
    <div class="InspectionTask">
        <div class="header">
            <div class="title" @click="link"></div>
        </div>
        <div class="Frame">
            <div class="total">
                <img src="@/assets/halo.png" alt="" />
                <div class="totalFrame">
                    <div class="number">{{ TaskData.all_count }}</div>
                    <div class="title">任务总数</div>
                </div>
            </div>
            <div class="schedule">
                <div class="completed">
                    <div class="title">
                        <div class="name">已完成</div>
                        <div class="number">{{ TaskData.completed_count }}</div>
                    </div>
                    <div class="progress">
                        <el-progress :text-inside="true" :stroke-width="10" :percentage="(TaskData.completed_count / TaskData.all_count) * 100
                            " />
                    </div>
                </div>
                <div class="toBeCompleted">
                    <div class="title">
                        <div class="name">待完成</div>
                        <div class="number">
                            {{ TaskData.all_count - TaskData.completed_count }}
                        </div>
                    </div>
                    <div class="progress">
                        <el-progress :text-inside="true" :stroke-width="10" :percentage="((TaskData.all_count - TaskData.completed_count) /
                                TaskData.all_count) *
                            100
                            " />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.InspectionTask {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.header {
    height: 0.2031rem;
    width: 100%;
    display: flex;

    .title {
        height: 0.2rem;
        width: 40%;
        display: inline-block;
        background-image: url("@/assets/title/InspectionTask.png");
        background-repeat: no-repeat;
        background-size: 0.53rem 0.1406rem;
        background-position: 0.0521rem 50%;
        cursor: pointer;
    }
}

.Frame {
    height: calc(100% - 0.2rem);
    width: 100%;
    padding: 0.025rem 0.23rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .total {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .totalFrame {
            width: 0.57rem;
            height: 0.57rem;
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .number {
                font-size: 0.14rem;
                font-weight: bold;
                color: #ffffff;
                text-shadow: 0 0 0.0521rem #91f9ab;
            }

            .title {
                font-size: 0.07rem;
                font-weight: 500;
                color: #afbbce;
                line-height: 0.13rem;
            }
        }

        @keyframes rotation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        img {
            width: 0.73rem;
            height: 0.73rem;
            animation: rotation 3s linear infinite;
        }
    }

    .schedule {
        width: 1.12rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .completed {
            margin-bottom: 0.1rem;
        }

        >div {
            width: 1.12rem;
            height: 0.3rem;
            background: rgba(12, 115, 255, 0.16);
            display: flex;
            flex-direction: column;
            justify-content: center;

            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 0.0521rem;

                .name {
                    font-size: 0.07rem;
                    font-weight: 500;
                    color: #afbbce;
                    line-height: 0.11rem;
                    display: flex;
                    align-items: center;
                }

                .name::before {
                    content: "";
                    display: inline-block;
                    width: 0.13rem;
                    height: 0.13rem;
                    background-image: url("@/assets/rhombus.png");
                    background-size: 100% 100%;
                }

                .number {
                    font-size: 0.07rem;
                    font-weight: 500;
                    color: #91f9ab;
                    line-height: 0.11rem;
                }
            }

            .progress {
                padding: 0 13px;

                :deep(.el-progress-bar__outer) {
                    background-color: #0e3269;
                    border: 1px solid #5966d0;
                }

                :deep(.el-progress-bar__inner) {
                    background-image: linear-gradient(to right, #56e6cf, #90f9ab);
                }
            }
        }
    }
}
</style>
